{% extends "base.html" %}

{% block css %}
    <style>
        .table-color {
            border: #1a1e21 solid 1px;
            padding: 5px;
            height: 1.5em;
        }
    </style>
{% endblock %}

{% block main %}
    <div class="container mt-4">
        <form class="form-inline" action="{% url 'repo:purchase' %}" method="post">
            {% csrf_token %}
            <fieldset>
                <div class="row">
                    <div class="col-sm-3 p-2">
                        <label>材料名称</label>
                        <select class="form-control" id="raw-sel" name="raw-sel">
                            {% if raw_spec_dict %}
                                {% for x,y in raw_spec_dict.items %}
                                    {#                                    {% for r in raw %}#}
                                    <option> {{ x }} </option>
                                    {#                                    {% endfor %}#}
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                    <div class="col-sm-3 p-2">
                        <label>规格</label>
                        <select class="form-control" id="spec-sel" name="spec-sel">
                            <option></option>
                        </select>
                    </div>
                    <div class="col-sm-3 p-2">
                        <label>数量</label>
                        <input name="number" type="number" class="form-control" id="num-sel"
                               placeholder="0">
                    </div>
                    <div class="col-sm-3 p-2">
                        <label>颜色</label>
                        <div class="dropdown form-control">
                            <button class="btn w-100 h-100" type="button" id="colorDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                            </button>
                            <ul class="dropdown-menu p-1" id="color-dropdown" aria-labelledby="dropdownMenuButton1">
                              {% if raw_list %}
                                  {% for raw in raw_list %}
                                      <li>
                                          <a class="dropdown-item mb-1" style="background-color: {{ raw.color.value }};
                                                  height: 20px; border: #676462 solid 1px" href="#" onclick="change_col_dropdown_color('{{ raw.color.value }}')"></a>
                                      </li>
                                  {% endfor %}
                              {% endif %}
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="offset-sm-9 col-sm-3 p-2">
                    <button type="submit" class="w-100 btn btn-primary">提交</button>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="container mt-4">
        <hr/>
        <div class="row table-responsive ">
            <div class="offset-3 col-9  offset-sm-9 col-sm-3 p-2">
                <button type="button" class="new w-100 btn btn-sm btn-link" data-bs-toggle="modal"
                        data-bs-target="#newRawMaterialModal">
                    <span data-feather="plus-square"></span>
                    新增
                </button>
            </div>
            <table class="table table-striped mtable">
                <thead>
                <tr>
                    <th>#</th>
                    <th>名称</th>
                    <th>规格</th>
                    <th>颜色</th>
                    <th>库存</th>
                </tr>
                </thead>
                <tbody>
                {% if raw_list %}
                    {% for raw in raw_list %}
                        <tr>
                            <td>{{ raw.id }}</td>
                            <td>{{ raw.name }}</td>
                            <td>{{ raw.spec }}</td>
                            <td>
                                <div class="row justify-content-start ms-1">
                                    <div class="col-md-4 col-5 table-color" style="background-color: {{ raw.color.value }};">
                                    </div>

                                </div>
                            </td>
                            <td>{{ raw.stock }}</td>
                        </tr>
                    {% endfor %}
                {% endif %}
                </tbody>
            </table>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="newRawMaterialModal" tabindex="-1" aria-labelledby="newRawMaterialModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-inline" action="{% url 'repo:purchase' %}" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="newRawMaterialModalLabel">新增原材料</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid">
                            {% csrf_token %}
                            <fieldset>
                                <div class="row">
                                    <div class="col-sm-3 p-2">
                                        <label>材料名称</label>
                                        <input class="form-control" id="raw-new" name="raw-new">
                                    </div>
                                    <div class="col-sm-3 p-2">
                                        <label>规格</label>
                                        <input class="form-control" id="spec-new" name="sepc-new">
                                    </div>
                                    <div class="col-sm-3 p-2">
                                        <label>数量</label>
                                        <input name="number" type="number" class="form-control" id="number-new"
                                               placeholder="0">
                                    </div>
                                    <div class="col-sm-3 p-2">
                                        <label>颜色</label>
                                        <input name="color" type="color" class="form-control" id="color-new"
                                               placeholder="0">
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block set_curPage %}
    curPage = document.getElementById("purchase")
{% endblock %}

{% block javascript %}
    <script>
        function removeOptions(selectElement) {
            var i, L = selectElement.options.length - 1;
            for (i = L; i >= 0; i--) {
                selectElement.remove(i);
            }
        }

        let raw_spec = {
        {% if raw_spec_dict %}
            {% for k,v in raw_spec_dict.items %}
                {{ k }} : [
                {% for i in v %}
                    '{{ i }}',
                {% endfor %}
            ],
            {% endfor %}
        {% endif %}
        }
        let sel = document.querySelector('#raw-sel')

        function change_evt(event) {
            const spec_sel = document.querySelector('#spec-sel')
            let cur = sel.selectedOptions[0].value
            let opt_arr = raw_spec[cur]
            removeOptions(spec_sel)
            for (let i = 0; i < opt_arr.length; i++) {
                op = document.createElement("option")
                op.innerText = opt_arr[i]
                spec_sel.append(op)
            }
        }

        sel.addEventListener('change', change_evt)

        function change_col_dropdown_color(color) {
            $("#colorDropdownMenuButton").css("background", color)
            $("#colorDropdownMenuButton").css("border", "#676462FF solid 1px")
        }

        $( document ).ready(function () {
            change_evt()
            change_col_dropdown_color("#FFFFFF")
        })
    </script>
{% endblock %}

